import { VNode, h } from 'vue'
import { TextComponentProps } from './defaultProps'
// import useTheme from './stores/module/theme'

// let color = useTheme().themeColor

// watch(() => useTheme().themeColor, (val) => {
//   console.log(11111111)
//   color = '#1677ff'
// })

// 字体
const fontFamilyArr = [
  { label: '宋体', value: 'SimSun,STSong' },
  { label: '黑体', value: 'SimHei,STHeiti' },
  { label: '楷体', value: 'KaiTi,STKaiti' },
  { label: '仿宋', value: 'FangSong,STFangsong' },
  { label: '微软雅黑', value: 'Microsoft YaHei,STYhei' },
  { label: '华文细黑', value: 'STXihei,STXihei' },
  { label: '新细明体', value: '"PMingLiU",serif' },
  
  { label: 'Arial style', value: 'Arial, sans-serif' },
  { label: 'Arial Black', value: '"Arial Black",Gadget,sans-serif' },
  { label: 'Arial Narrow', value: '"Arial Narrow",Arial,sans-serif' },
  { label: 'Arial Rounded MT Bold', value: '"Arial Rounded MT Bold",Arial,sans-serif' },
  { label: 'Book Antiqua', value: '"Book Antiqua",Palatino,serif' },
  { label: 'Comic Sans', value: 'Comic Sans MS' },
  { label: 'Courier New', value: '"Courier New",Courier,monospace' },
  { label: 'Georgia', value: 'Georgia,serif' },
  { label: 'Impact', value: 'Impact,chicago' },
  { label: 'Lucida Console', value: '"Lucida Console",Monaco,monospace' },
  { label: 'Lucida Sans Unicode', value: '"Lucida Sans Unicode",Lucida Grande,sans-serif' },
  { label: 'Palatino Linotype', value: '"Palatino Linotype",Book Antiqua,Palatino,serif' },
  { label: 'Tahoma', value: 'Tahoma,Geneva,sans-serif' },
  { label: 'Times New Roman', value: '"Times New Roman",Times,serif' },
  { label: 'Trebuchet MS', value: '"Trebuchet MS",Helvetica,sans-serif' },
  { label: 'Verdana', value: 'Verdana,Geneva,sans-serif' },
]

const fontFamilyOption = fontFamilyArr.map(item => {
  return {
    value: item.value,
    label: h('span', { style: { fontFamily: item.value } }, item.label)
  }
})

// 边框线
const borderStyleArr = [
  { label: '实线', value: 'solid' },
  { label: '虚线', value: 'dashed' },
  { label: '点状线', value: 'dotted' }
]

const borderStyleArrOpt = borderStyleArr.map(item => {
  return {
    value: item.value,
    label: h('div', { style: { width: '92%', borderTop: `2px ${item.value} #000`,
            position: 'absolute', top: '50%', transform: 'translateY(-50%)' } }, '')
  }
})

interface SliderMarks {
  [key: number]: {
    style: {
      color: string,
      fontSize: string,
      left?: string
    },
    label: string
  }
}
// 处理进度条样式
function getSliderMarks(data: {min: number, max: number, unit: string, color: string,left?: string}): SliderMarks {
  const { min, max, unit, color,left } = data
  return {
    [min]: {
      style: {
        color: 'rgba(0, 0, 0, 0.45)',
        fontSize: '12px',
        left: left ? left : '8px',
      },
      label: `${min + unit}`,
    },
    [max]: {
      style: {
        color: color,
        fontSize: '12px',
      },
      label: `${max + unit}`,
    }
  }
}

export interface PropsToForm {
  component: string
  // 子组件
  subComponent?: string,
  // 样式名字
  text?: string,
  // // 绑定值
  // value?: string
  // 父组件的 v-bing
  extraProps?: { [key: string]: any}
  // 子组件的 option
  options?: { label: string | VNode, value: string }[]
  // 样式值 的转化
  initialTransform?: (v: any) => any
  valueProp?: string
  // 事件名
  eventName?: string
  // 处理数据
  afterTransform?: (v: any) => any
}

export type PropsToForms = {
  [p in keyof TextComponentProps]?: PropsToForm
}

type PropsToFormsList = Array<{
  attributeName: string,
  mapPropsToForms: PropsToForms
}>


export default function getMapPropsToFormsList(color: string): PropsToFormsList {
  return [
    {
      attributeName: '基本属性',
      mapPropsToForms: {
        text: {
          text: '文本',
          component: 'a-textarea',
          extraProps: { rows: 3},
          // initialTransform: (v:string) =>  v + '',
          afterTransform: (e: any) => e.target.value
        },
        fontSize: {
          text: '字号',
          component: 'a-input-number',
          initialTransform: (v: string) =>  parseInt(v),
          afterTransform: (e: number) => e ? `${e}px` : ''
        },
        lineHeight: {
          text: '行高',
          component: 'a-slider',
          extraProps: { max: 3, min: 1, step: 0.1},
          initialTransform: (v: string) =>  parseFloat(v) ,
          afterTransform: (e: number) => e.toString()
        },
        fontFamily: {
          text: '字体',
          component: 'a-select',
          subComponent: 'a-select-option',
          extraProps: {},
          options: [
            { label: '无', value: '' },
            ...fontFamilyOption
          ]
        },
        textAlign: {
          component: 'a-radio-group',
          text: '对齐',
          subComponent: 'a-radio-button',
          extraProps: { buttonStyle: "solid" },
          options: [
            { label: '左', value: 'left' },
            { label: '中', value: 'center' },
            { label: '右', value: 'right' }
          ],
          afterTransform: (e: any) => e.target.value
        },
        color: {
          component: 'z-color-picker',
          text: '文字颜色',
          extraProps: {
            defaultColor: '#000',
          },
          
        },
        backgroundColor: {
          component: 'z-color-picker',
          text: '背景颜色',
          extraProps: {
            defaultColor: 'transparent',
          },
          // eventName: 'pureColorChange'
        }
      }
    },
    {
      attributeName: '尺寸',
      mapPropsToForms: {
        height: {
          text: '高度',
          component: 'a-input-number',
          extraProps: { min: 0, max: 500, step: 1},
          initialTransform: (v: string) =>  parseFloat(v),
          afterTransform: (e: number) => e ? `${e}px` : '0px'
          
        },
        width: {
          text: '宽度',
          component: 'a-input-number',
          extraProps: { min: 0, max: 500, step: 1 },
          initialTransform: (v: string) =>  parseFloat(v),
          afterTransform: (e: number) => e ? `${e}px` : '0px'
        },
        paddingLeft: {
          text: '左边距',
          component: 'a-input-number',
          extraProps: { min: 0, max: 1000, step: 1 },
         
          initialTransform: (v: string) =>  parseInt(v),
          afterTransform: (e: number) => e ? `${e}px` : '0px'
        },
        paddingRight: {
          text: '右边距',
          component: 'a-input-number',
          extraProps: { min: 0, max: 1000, step: 1 },
          
          initialTransform: (v: string) =>  parseInt(v),
          afterTransform: (e: number) => e ? `${e}px` : '0px'
        },
        paddingTop: {
          text: '上边距',
          component: 'a-input-number',
          extraProps: { min: 0, max: 1000, step: 1 },
         
          initialTransform: (v: string) =>  parseInt(v),
          afterTransform: (e: number) => e ? `${e}px` : '0px'
        },
        paddingBottom: {
          text: '下边距',
          component: 'a-input-number',
          extraProps: { min: 0, max: 1000, step: 1 },
          initialTransform: (v: string) =>  parseInt(v),
          afterTransform: (e: number) => e ? `${e}px` : '0px'
        }
      }
    },
    {
      attributeName: '边框',
      mapPropsToForms: {
        borderStyle: {
          text: '样式',
          component: 'a-select',
          subComponent: 'a-select-option',
          extraProps: {
            // open: true
          },
          options: [
            { label: '无', value: 'none' },
            ...borderStyleArrOpt
          ],
        },
        borderColor: {
          text: '颜色',
          component: 'z-color-picker',
          extraProps: {
            defaultColor: 'transparent',
          }
        },
        borderWidth: {
          text: '宽度',
          component: 'a-slider',
          extraProps: {
            max: 20, min: 0, step: 1,
            marks: getSliderMarks({min: 0, max:20, unit: 'px', color, left: '4px'})
          },
          initialTransform: (v: string) =>  parseInt(v),
          afterTransform: (e: number) => e ? `${e}px` : '0px'
        },
        borderRadius: {
          text: '圆角',
          component: 'a-slider',
          extraProps: {
            max: 100, min: 0, step: 1,
            marks: getSliderMarks({min: 0, max: 100, unit: 'px', color, left: '4px'})
          },
          initialTransform: (v: string) =>  parseInt(v),
          afterTransform: (e: number) => e ? `${e}px` : '0px'
        }
      }
    },
    {
      attributeName: '阴影与透明度',
      mapPropsToForms: {
        opacity: {
          text: '透明度',
          component: 'a-slider',
          extraProps: {
            max: 100, min: 0, step: 1, reverse: true,
            marks: getSliderMarks({min: 0, max: 100, unit: '%', color, left: '4px'})
          },
          initialTransform: (v: number) => v * 100,
          afterTransform: (e: number) => e ? e / 100 : 100
        },
        boxShadowColor: {
          text: '阴影颜色',
          component: 'z-color-picker',
          extraProps: {
            defaultColor: 'transparent',
          },
        },
        boxShadowHorizontal: {
          text: '水平方向',
          component: 'a-slider',
          extraProps: {
            max: 30, min: -20, step: 1,
            marks: getSliderMarks({min: -20, max: 30, unit: 'px', color})
          },
          initialTransform: (v: string) => parseInt(v),
          afterTransform: (e: number) => e ? `${e}px` : '0px'
        },
        boxShadowVertical: {
          text: '垂直方向',
          component: 'a-slider',
          extraProps: {
            max: 30, min: -20, step: 1,
            marks: getSliderMarks({min: -20, max: 30, unit: 'px', color})
          },
          initialTransform: (v: string) => parseInt(v),
          afterTransform: (e: number) => e ? `${e}px` : '0px'
        },
        boxShadowBlur: {
          text: '阴影模糊',
          component: 'a-slider',
          extraProps: {
            max: 20, min: 0, step: 1,
            marks: getSliderMarks({min: 0, max: 20, unit: 'px', color, left: '4px'})
          },
          initialTransform: (v: string) => parseInt(v),
          afterTransform: (e: number) => e ? `${e}px` : '0px'
        },
      }
    },
    {
      attributeName: '位置',
      mapPropsToForms: {
        left: {
          text: 'x轴坐标',
          component: 'a-input-number',
          initialTransform: (v: string) => parseInt(v),
          afterTransform: (e: number) => e ? `${e}px` : '0px'
        },
        top: {
          text: 'y轴坐标',
          component: 'a-input-number',
          initialTransform: (v: string) => parseInt(v),
          afterTransform: (e: number) => e ? `${e}px` : '0px'
        }
      }
    },
    {
      attributeName: '事件功能',
      mapPropsToForms: {
        actionType: {
          text: '点击',
          component: 'a-select',
          subComponent: 'a-select-option',
          extraProps: {
            // open: true
          },
          options: [
            { label: '无', value: '' },
            { label: '打开新窗口', value: 'url'}
          ],
         
        },
        url: {
          text: '链接地址',
          component: 'a-input',
          extraProps: {},
          // initialTransform: (v: string) => parseInt(v),
          afterTransform: (e: any) => e.target.value
        }
      }
    }
  ]
}
 
